<template>
  <div class="hazard-trend">
    <div class="title"></div>
    <div class="main">
      <LineEcharts
          :echartsData="echartsData"
          :extra="{legend: {top: 4, itemGap: 10, align: 'right'}, grid: {top: '30%', bottom: 0}}"
          :graphicColor="[
          ['rgba(221, 150, 13, 0.3)', 'rgba(221, 150, 13, 0)'],
          ['rgba(239, 102, 27, 0.3)', 'rgba(239, 102, 27, 0)'],
          ['rgba(7, 146, 211, 0.3)', 'rgba(7, 146, 211, 0)'],
          ['rgba(81, 108, 163, 0.3)', 'rgba(81, 108, 163, 0)'],
          ['rgba(11, 171, 162, 0.3)', 'rgba(11, 171, 162, 0)'],
        ]"
      />
    </div>

    <div class="tab-box">
      <ComRadioTabA :tab="currentTab" :tab-list="tabList" @change="changeTime" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import LineEcharts from '@/components/echarts/lineChart.vue';
import ComRadioTabA from '@/components/tabComp/ComRadioTabA.vue';

const currentTab = ref('1');
const tabList = [
  { name: '1', label: '近半年' },
];
const echartsData = {
  label: ['6-25', '6-26', '6-27', '6-28', '6-29', '6-30', '7-1', '7-2'],
  data: [
    {
      name: '物联网隐患数',
      value: [80, 82, 120, 110, 99, 101, 111, 99],
    },
    {
      name: '监督隐患数',
      value: [90, 89, 97, 99, 100, 104, 108, 101],
    },
    {
      name: '高层建筑隐患数',
      value: [89, 82, 120, 110, 99, 101, 111, 99],
    },
    {
      name: '其他隐患',
      value: [79, 89, 97, 99, 100, 104, 108, 101],
    },
    {
      name: '商业综合体隐患',
      value: [27, 89, 97, 99, 100, 104, 108, 101],
    },
  ],
};

function changeTime(val: string) {
  currentTab.value = val;
}

defineComponent({ name: 'HazardTrend' });
</script>

<style scoped lang="scss">
.hazard-trend {
  @apply relative w-full h-full;

  .title {
    @apply w-full h-[31px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-[280px];
  }

  .tab-box {
    @apply absolute right-0 top-[-6px];
  }
}
</style>
